<template>
	<view class="personal">
		<view>
			<u-form :model="form" ref="uForm">
				<view class="title">
					个人信息*
				</view>
				<view class="form_box">
					<u-form-item label="国家/地区" prop="country" label-width='auto'>
						<u-input v-model="form.country" />
					</u-form-item>
					<u-form-item label="姓名" label-width='auto' prop="trueName">
						<u-input v-model="form.trueName" />
					</u-form-item>
				</view>
				<view class="title">
					护照信息*
				</view>
				<view class="form_box">
					<u-form-item label="护照编号" label-width='auto' prop="passportNum">
						<u-input v-model="form.passportNum" />
					</u-form-item>
					<u-form-item label-width='auto'>
						<view class="upload_box">
							<view class="upload_item">
								<hyUpload @onSuccess='onSuccessPassport'></hyUpload>
								<text>护照照片</text>

							</view>
							<view class="upload_item">
								<hyUpload @onSuccess='onSuccessPassportHold'></hyUpload>
								<text>手持护照照片</text>

							</view>
							<view class="upload_item"></view>
						</view>
					</u-form-item>

				</view>
				<view class="title">
					驾照信息
				</view>
				<view class="form_box">
					<u-form-item label="驾照编号" label-width='auto'>
						<u-input v-model="form.drivingNum" />
					</u-form-item>
					<u-form-item label-width='auto'>
						<view class="upload_box">
							<view class="upload_item">
								<hyUpload @onSuccess='onSuccessDriving'></hyUpload>
								<text>驾照照片</text>

							</view>
							<view class="upload_item">
								<!-- drivingFan -->
								<hyUpload @onSuccess='onSuccessDrivingFan'></hyUpload>
								<text>驾照背面照片</text>
							</view>
							<view class="upload_item">
								<hyUpload @onSuccess='onSuccessDrivingHold'></hyUpload>
								<text>手持驾照照片</text>

							</view>
						
						</view>
					</u-form-item>

				</view>
				<view class="title">
					社保卡信息
				</view>
				<view class="form_box">
					<u-form-item label="社保卡号" label-width='auto' prop="securityNum">
						<u-input v-model="form.securityNum" />
					</u-form-item>
					<u-form-item label-width='auto'>
						<view class="upload_box">
							<view class="upload_item">
								<hyUpload @onSuccess='onSuccesSsecurityImg'></hyUpload>
								<text>社保卡照片</text>
							</view>
							<view class="upload_item">
								<hyUpload @onSuccess='onSuccesSecurityFan'></hyUpload>
								<text>社保卡背面照片</text>
							</view>
							<view class="upload_item">
								<hyUpload @onSuccess='onSuccesSsecurityHold'></hyUpload>
								<text>手持社保卡照片</text>

							</view>
							
						</view>
					</u-form-item>

				</view>
				<view class="title">
					其他有效证件
				</view>
				<view class="form_box">
					<u-form-item label="证件类型" label-width='auto'>
						<u-input v-model="form.otherPapersType" />
					</u-form-item>
					<u-form-item label="证件编号" label-width='auto'>
						<u-input v-model="form.otherPapersNumber" />
					</u-form-item>
					<u-form-item label-width='auto'>
						<view class="upload_box">
							<view class="upload_item">
								<hyUpload @onSuccess='onSuccessOterPapers'></hyUpload>
								<text>正面照片</text>

							</view>
							<view class="upload_item">
								<hyUpload @onSuccess='onSuccessOterPapersJus'></hyUpload>
								<text>反面照片</text>

							</view>
							<view class="upload_item">

								<hyUpload @onSuccess='onSucceccOterPapersHold'></hyUpload>
								<text>手持证件照片</text>

							</view>
						</view>
					</u-form-item>
				</view>


				<view class="title">
					地址信息*
				</view>
				<view class="form_box">
					<u-form-item label="详细地址" prop="address" label-width='auto'>
						<u-input v-model="form.address" />
					</u-form-item>

					<u-form-item label-width='auto'>
						<!-- <hyUpload @onSuccess='onSuccessAddress'></hyUpload> -->
						<view class="upload_item flex_upload_tetxt">
							<hyFileUpload @handSuccessFilsList='(res)=>onSuccessFilsList(res,"addressImg")'></hyFileUpload>
							<text>请上传银行流水，账单，租约等地址证明</text>
						</view>
					</u-form-item>
				</view>
				<view class="title">
					资金来源证明（大额交易）
				</view>
				<view class="form_box">
					<u-form-item label-width='auto'>
						<view class="upload_box">
							<view class="upload_item flex_upload_tetxt">
								<!-- <hyUpload @onSuccess='onSuccessSource'></hyUpload> -->
								<hyFileUpload @handSuccessFilsList='(res)=>onSuccessFilsList(res,"sourceImg")'></hyFileUpload>
								<text>证明文件</text>
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="title">
					其他相关资料
				</view>
				<view class="form_box">
					<u-form-item label-width='auto'>
						<view class="upload_box">
							<view class="upload_item flex_upload_tetxt">
								<!-- <hyUpload @onSuccess='onSuccessOther'></hyUpload> -->
								<hyFileUpload @handSuccessFilsList='(res)=>onSuccessFilsList(res,"otherImg")'></hyFileUpload>
								<text>证明文件</text>
							</view>
						</view>
					</u-form-item>
				</view>
			</u-form>
		</view>
		<u-calendar v-model="calendarShow" @change='changeDate' :mode="'date'"></u-calendar>
		<view class="submit">
			<u-button @click="submit" type="success">提交</u-button>
		</view>
	</view>
</template>

<script>
	import hyUpload from '@/components/hy-upload/hy-upload.vue'
	import hyFileUpload from '@/components/hy-file-upload/hy-file-upload.vue'
	export default {
		components: {
			hyUpload,
			hyFileUpload
		},
		data() {
			return {

				calendarShow: false,

				action: 'http://www.example.com/upload',
				fileList: [],
				form: {
					address: '', //'详细地址',
					addressImg: '', //'地址证明',
					drivingHold: '', // '手持驾照照片',
					drivingJust: '', //'驾照照片',
					drivingNum: '', // '驾照编号',
					oddNumbers: '', // '申请单编号',
					otherImg: '', //'其他证明照片',
					passportHold: '', // '手持护照照片',
					passportJust: '', // '护照照片',
					passportNum: '', // '护照编号',
					securityHold: '', // '社保手持照片',
					securityFan:'',
					drivingFan:'',
					securityJust: '', //'社保照片',
					securityNum: '', //'社保卡号',
					sourceImg: '', //'资金来源证明',
					trueName: '', // '名字'
					country: '', //国家地区
					otherPapersHold: '', //其他手持
					otherPapersJust: '', //其他正面
					otherPapersSide: '', //其他反面
				},
				rules: {
					trueName: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					country: [{
						required: true,
						message: '请输入国家/地区',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					// securityNum: [{
					// 	required: true,
					// 	message: '请输入社保卡卡号',
					// 	// 可以单个或者同时写两个触发验证方式 
					// 	trigger: ['change', 'blur'],
					// }],
					passportNum: [{
							required: true,
							message: '请输入护照编号',
							trigger: ['change', 'blur'],
						},

					],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: ['change', 'blur'],
					}],
				},

			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		async onShow() {

		},
		methods: {
			onSuccessFilsList(files, key) {
				const fileStr = files.map(item => item.url)
				this.form[key] = fileStr.join(',')
			},
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						if (this.isUploadImg()) {
							const newForm = {
								accountType: 2,
								userMainland: {},
								userNonMainland: this.form
							}
							const res = await this.$u.api.addUserMainland(newForm)
							uni.redirectTo({
								url: '../examine/examine'
							})
						}

					} else {
						console.log('验证失败');
					}
				});
			},
			isUploadImg() {


				if (!this.form.passportHold) {
					uni.showToast({
						title: '请上传手持护照照片',
						icon: 'none'
					})
					return false
				}
				if (!this.form.passportJust) {
					uni.showToast({
						title: '请上传护照照片',
						icon: 'none'
					})
					return false
				}
				// if (!this.form.securityJust) {
				// 	uni.showToast({
				// 		title: '请上传社保照片',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				// if (!this.form.securityHold) {
				// 	uni.showToast({
				// 		title: '请上传手持社保照片',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				if (!this.form.addressImg) {
					uni.showToast({
						title: '请上传地址证明',
						icon: 'none'
					})
					return false
				}
				return true



			},
			//其他 正面
			onSuccessOterPapers(res) {
				this.form.otherPapersJust = res.data
			},
			//其他手持
			onSucceccOterPapersHold(res) {
				this.form.otherPapersHold = res.data
			},
			// 其他 反面
			onSuccessOterPapersJus(res) {
				this.form.otherPapersSide = res.data
			},
			// 地址证明
			onSuccessAddress(res) {
				this.form.addressImg = res.data
			},
			// 护照
			onSuccessPassport(res) {
				this.form.passportJust = res.data
			},
			// 手持护照
			onSuccessPassportHold(res) {
				this.form.passportHold = res.data
			},
			// 驾照
			onSuccessDriving(res) {
				this.form.drivingJust = res.data
			},
			// 手持驾照
			onSuccessDrivingHold(res) {
				this.form.drivingHold = res.data
			},
			onSuccessDrivingFan(res){
				this.form.drivingFan = res.data
			},
			// 社保卡照片
			onSuccesSsecurityImg(res) {
				this.form.securityJust = res.data
			},
			// 社保卡手持照片
			onSuccesSsecurityHold(res) {
				this.form.securityHold = res.data
			},
			onSuccesSecurityFan(res){
				this.form.securityFan = res.data
			},
			// 资金来源照片
			onSuccessSource(res) {
				this.form.sourceImg = res.data
			},
			// 其他照片
			onSuccessOther(res) {
				this.form.otherImg = res.data
			},
			// 银行卡有效期
			changeDate(e) {
				this.form.bankValidity = e.result || ''
			},


		}
	}
</script>

<style lang="scss">
	.personal {
		padding-bottom: 120rpx;

		.submit {
			z-index: 888;
			width: 100%;
			background-color: #f7f7f7;
			padding: 30rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
		}

		.upload_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.upload_item {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		.form_box {
			padding: 0 30rpx;
			box-sizing: border-box;

		}

		.title {
			background-color: #f7f7f7;
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
	}
</style>
